<div class="top-left">
  <span class="location-title">汇集平台</span>

</div>
<div class="main-content">
  <button class="create-button" [disabled]="!isLoad&&!loadQRcode" nz-button nzType="primary" (click)="isOpenShare=true">
    分享地址</button>
  <nz-skeleton [nzActive]="true" [nzLoading]="!isLoad">
    <div class="collect-box">
      <div *ngIf="isLoad" class="mid">
        <div class="title">
          {{collectPlatform.title}}
        </div>
        <div class="carousel" v-if="collectPlatform.model.carousel.length>0">
          <nz-carousel nzAutoPlay>
            <div nz-carousel-content class="cover" *ngFor="let item of collectPlatform.model.carousel;let i=index"
              [style]="{'background-image':item.logo?'url('+ossUrl +item.logo+')':'url(/assets/images/default-vr-bg.png)'}">
            </div>
          </nz-carousel>
        </div>

        <div class="collect" *ngFor="let item of collectPlatform.model.items;let i=index">
          <div class="collect-title">{{item.title}}</div>
          <div class="collect-list">
            <div class="collect-item" *ngFor="let item2 of collectList[i]">
              <div class="collect-item-cover"
                [style]="{'background-image':item2.logo?'url('+ossUrl +item2.logo+')':'url(/assets/images/default-vr-bg.png)'}">
              </div>
              <div class="collect-item-name">{{item2.title}}</div>
            </div>
          </div>
        </div>

      </div>




      <div class="right">
        <div class="item">
          <div class="label">标题内容(不超过10个汉字):</div>
          <input class="input-text" nz-input placeholder="标题内容" maxlength="10" (ngModelChange)="save()"
            [(ngModel)]="collectPlatform.title" (ngModelChange)="save()" />
        </div>
        <div class="item">
          <div class="label">置顶轮播:</div>
          <div class="lib">
            <div class="lib-item" *ngFor="let item of collectPlatform.model.carousel;let i=index">
              <i nz-icon nzType="close-circle" class="close" (click)="removeCarousel(i)" nzTheme="outline"></i>
              <div class="lib-cover"
                [style]="{'background-image':item.logo?'url('+ossUrl+item.logo+')':'url(/assets/images/default-vr-bg.png)'}">
              </div>
              <div class="lib-title">
                {{item.title}}
              </div>
              <div class="lib-bottom">
                <div class="lib-date"> {{ item.date| date:'yyyy-MM-dd'}}</div>
                <div class="lib-watch">
                  <i nz-icon>
                    <svg t="1614177128952" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2128" width="14" height="14">
                      <path
                        d="M512 248.32c184.32 0 340.48 107.52 414.72 263.68L998.4 512C921.6 320 732.16 184.32 512 184.32 291.84 184.32 102.4 320 25.6 512l71.68 0C171.52 355.84 327.68 248.32 512 248.32L512 248.32zM512 775.68c-184.32 0-340.48-107.52-414.72-263.68L25.6 512c76.8 192 266.24 327.68 486.4 327.68 220.16 0 409.6-135.68 486.4-327.68l-71.68 0C852.48 668.16 696.32 775.68 512 775.68L512 775.68zM337.92 512c0 97.28 79.36 174.08 174.08 174.08 97.28 0 174.08-79.36 174.08-174.08s-79.36-174.08-174.08-174.08C414.72 337.92 337.92 414.72 337.92 512L337.92 512zM622.08 512c0 61.44-48.64 110.08-110.08 110.08s-110.08-48.64-110.08-110.08 48.64-110.08 110.08-110.08S622.08 450.56 622.08 512L622.08 512zM622.08 512"
                        p-id="2129"></path>
                    </svg>
                  </i>
                  {{item.watchCount}}
                </div>
              </div>
            </div>
            <div class="lib-item add" (click)="visible = 'carousel'">
              <i nz-icon nzType="plus" nzTheme="outline"></i>
              <div>添加置顶</div>
              <div>轮播视频</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="label">视频栏目:</div>
          <div class="column-yxz">
            <div class="column-item" *ngFor="let item of collectPlatform.model.items;let i=index">
              <i nz-icon nzType="close-circle" class="close" (click)="removeCollect(i)" nzTheme="outline"></i>
              <div class="column-cover" [style]="{'background-image':'url(/assets/images/category-cover.png)'}">
              </div>
              <div class="column-bottom">
                <div class="column-showNum" nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu1">
                  显示{{item.showNum==1000?'全部':item.showNum+'个'}}
                  <i nz-icon nzType="down"></i>
                </div>
                <nz-dropdown-menu #menu1="nzDropdownMenu">
                  <ul nz-menu nzSelectable>
                    <li nz-menu-item (click)="updateColumn(item,2)">2</li>
                    <li nz-menu-item (click)="updateColumn(item,4)">4</li>
                    <li nz-menu-item (click)="updateColumn(item,6)">6</li>
                    <li nz-menu-item (click)="updateColumn(item,8)">8</li>
                    <li nz-menu-item (click)="updateColumn(item,1000)">全部</li>
                  </ul>
                </nz-dropdown-menu>
                <div class="column-sort" nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu2">
                  {{item.sort=='date'?'按时间排序':'按热度排序'}} <i nz-icon nzType="down"></i>
                </div>
                <nz-dropdown-menu #menu2="nzDropdownMenu">
                  <ul nz-menu nzSelectable>
                    <li nz-menu-item (click)="updateColumn(item,'date')">按时间排序</li>
                    <li nz-menu-item (click)="updateColumn(item,'num')">按热度排序</li>
                  </ul>
                </nz-dropdown-menu>
              </div>
              <div class="column-title">
                {{item.title}}
              </div>
            </div>
            <div class="column-item add" (click)="visible = 'column'">
              <i nz-icon nzType="plus" nzTheme="outline"></i>
              <div>添加栏目</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nz-skeleton>
</div>

<nz-drawer [nzWidth]="512" [nzClosable]="false" [nzVisible]="visible == 'carousel'" nzPlacement="right" nzTitle="选择视频"
  (nzOnClose)="visible=null">
  <nz-tree [nzData]="nodes" nzAsyncData="true" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)" #treeCom1
    nzShowIcon></nz-tree>
  <button *ngIf="isLoad" style="margin-top: 40px;" nz-button [disabled]="selectCarouselNodeDisabled()" nzType="primary"
    (click)="selectCarousel()">确定</button>
</nz-drawer>

<nz-drawer [nzWidth]="512" [nzClosable]="false" [nzVisible]="visible == 'column'" nzPlacement="right"
  nzTitle="选择视频库，添加栏目" (nzOnClose)="visible=null">
  <nz-tree [nzData]="nodes2" nzAsyncData="true" (nzClick)="nzEvent2($event)" (nzExpandChange)="nzEvent2($event)"
    #treeCom2 nzShowIcon></nz-tree>
  <button *ngIf="isLoad" style="margin-top: 40px;" nz-button [disabled]="selectColumnNodeDisabled()" nzType="primary"
    (click)="selectColumn()">确定</button>
</nz-drawer>


<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isOpenShare" (nzOnCancel)="isOpenShare=false"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="分享地址" [nzFooter]="null">
  <div class="live-address">
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="3">查看地址 :</div>
      <div nz-col nzSpan="18"><input #watchUrl2 nz-input readonly="readonly"
          [ngModel]="'https://player.ysjlive.com/collect-platform/'+collectPlatform.id" /></div>
      <div nz-col nzSpan="3"><button nz-button (click)="copy('watchUrl2')" nzType="primary">复制</button></div>
      <p style="padding-left: 103px;padding-top: 10px;">[<span style="color: #6C00D8;">云视界</span>]分享请复制该地址并发送给好友，推荐使用
        Chrome 浏览器打开。</p>
    </div>

    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="3">二维码 :</div>
      <div nz-col nzSpan="18">
        <div #qrcodedom>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </div>
</nz-modal>